<script lang="ts" setup>
import { onMounted, ref, inject } from "vue";
import { useRouter } from "vue-router";
import { gsap } from "gsap";
import emitter from "@/util/mitt";
let audio = inject("audioDom") as any;
let poster = ref<string | boolean>(
  "https://tse1-mm.cn.bing.net/th/id/OIP-C.avDeF51oIFI1ooF7OaG5rgHaHa?pid=ImgDet&rs=1"
);

// 判断当前环境是否是微信环境 如果是则poster为默认值不是的话为false
let checkProduction = () => {
  let ua = navigator.userAgent.toLowerCase();
  let isWeixin = ua.indexOf("micromessenger") != -1;
  if (isWeixin) {
    poster.value =
      "https://tse1-mm.cn.bing.net/th/id/OIP-C.avDeF51oIFI1ooF7OaG5rgHaHa?pid=ImgDet&rs=1";
  } else {
    poster.value = true;
  }
};

let router = useRouter();
let desc = ref<string>(
  "电视貌似故障了,请尝试,拍打它,-（正如我们成长总要，不时被敲打）"
);

let testSrc =
  "http://149.88.64.236:2003/public/videos/happy.mp4";

let addClassRoot = ref();
let clickCount = 0;

let isShow = ref<boolean>(false);
let skipVideo = ref(); // 弹出视频dom
// 电视点击处理函数
let videoClickHandler = () => {
  let isPlay = audio.value.paused ? false : true;
  desc.value = "啊偶！好像被拍坏了~(问题不大 请看vcr) 点击两次可以开启";
  if (clickCount >= 1) {
    addClassRoot.value.classList.remove("animate__rotateInDownLeft");
    addClassRoot.value.classList.add("animate__hinge");
    // 等动画结束
    addClassRoot.value.addEventListener("animationend", () => {
      // 此处是防止归置电视机位置之后 自动进行播放了
      if (clickCount !== 0) {
        emitter.emit("set-audio-play", false);
        isShow.value = true;
        skipVideo.value.play();
        skipVideo.value.muted = false;
      }
      // 暂停全局音乐的播
    });
  }
  clickCount++;
  // clickCount = clickCount * 2
  let addRotT = gsap.timeline({
    defaults: { duration: 0.1, ease: "power2.inOut" },
  });
  addRotT
    .to(addClassRoot.value, {
      duration: 0.3,
      rotateZ: `${clickCount}deg`,
      yoyo: true,
      ease: "power2.inOut",
    })
    .to(addClassRoot.value, {
      duration: 0.3,
      rotateZ: `0deg`,
      yoyo: true,
      ease: "power2.inOut",
    })
    .to(addClassRoot.value, {
      duration: 0.3,
      rotateZ: `-${clickCount}deg`,
      yoyo: true,
      ease: "power2.inOut",
    })
    .to(addClassRoot.value, {
      duration: 0.3,
      rotateZ: `0deg`,
      yoyo: true,
      ease: "power2.inOut",
    });
};

// 检查电视出现动画结束之后都懂函数
let checkVideoEnd = () => {
  addClassRoot.value.addEventListener("animationend", () => {
    let r = 1;
    console.log("初始动画结束", "开始创建gsap动画");
    let addRotT = gsap.timeline({
      defaults: { duration: 1, ease: "power2.inOut", repeat: -1 },
    });
    addRotT
      .to(addClassRoot.value, {
        duration: 1,
        rotateZ: `${r}deg`,
        yoyo: true,
        ease: "power2.inOut",
      })
      .to(addClassRoot.value, {
        duration: 1,
        rotateZ: `-${r}deg`,
        yoyo: true,
        ease: "power2.inOut",
      });
  });
};

let backHandler = () => {
  router.push("/home");
};

let skipHandler = () => {
  emitter.emit("set-audio-play", true);
  isShow.value = false;
  skipVideo.value.pause();
  skipVideo.value.muted = true;
  clickCount = 0;
  addClassRoot.value.classList.remove("animate__hinge");
  addClassRoot.value.classList.add("animate__rotateInDownLeft");
};

onMounted(() => {
  checkVideoEnd();
  checkProduction();
});
</script>

<template>
  <div class="video">
    <button class="back" @click="backHandler">返回</button>
    <div
      ref="addClassRoot"
      class="video-container animate__animated"
      @click="videoClickHandler"
    >
      <div class="animate__animated animate__zoomInDown border-container">
        <div class="video-mask"></div>
        <video
          class="video-info"
          playsinline="true"
          x5-video-player-type="h5"
          x5-video-orientation="h5"
          :poster="poster"
          autoplay
          muted
          loop
          :src="testSrc"
        ></video>
      </div>
      <div></div>
    </div>
    <p class="desc">
      <span>{{ desc }}</span>
    </p>
    <!-- 视频弹窗遮罩 -->
    <div v-show="isShow" class="skip-video-mask">
      <button class="back" @click="skipHandler">关闭</button>
      <video class="skip-video" :src="testSrc" ref="skipVideo" muted></video>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.video {
  overflow: hidden;
  box-sizing: border-box;
  width: 100%;
  height: 100vh;
  //background-color: #faaf8f;
  background-image: url("@/assets/images/mobiel/mobiel_bg_3.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position-x: center;
  .back {
    margin: 20px auto 20px 20px;
    font-family: 摆烂躺平, "Microsoft YaHei UI Light";
    font-size: 18px;
    outline: none;
    width: 50px;
    height: 50px;
    border-radius: 100%;
    line-height: 35px;
    text-align: center;
    color: #fff;
    border: none;
    background-color: rgb(240, 98, 146);
    box-shadow: 0px 0px 10px rgb(240, 98, 146);
  }
  .video-container {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    margin: 20px auto;
    width: 100%;
    max-width: 90%;
    .border-container {
      margin: 0 auto;
      position: relative;
      width: 335px;
      height: 250px;
    }
    .video-mask {
      position: absolute;
      z-index: 21;
      top: 0px;
      left: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      background-image: url("@/assets/images/television.png");
      background-size: 100%;
      background-repeat: no-repeat;
      background-position: center;
    }
    .video-info {
      position: absolute;
      z-index: 1;
      top: 40px;
      left: 25px;
      width: 250px;
      height: 160px;
      object-fit: cover;
    }
  }
  .desc {
    font-size: 22px;
    box-sizing: border-box;
    width: 100%;
    margin: 0 auto;
    padding: 60px 80px;
    line-height: 42px;
    font-family: 摆烂躺平;
    text-align: center;
    color: white;
    color: #000;
    background-image: url("@/assets/images/message_bg.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 20px;
    // max-height: 228px;
    span {
      padding: 20px;
    }
  }
  // video弹窗
  .skip-video-mask {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0px;
    left: 0;
    z-index: 99;
    background-color: rgba(8, 8, 8, 0.893);
    .skip-video {
      width: 90%;
      height: auto;
    }
  }
}
</style>
